<template>
    <view class="home-container">
        <NavBar></NavBar>
        <TabBar 
		:labelList="labelList"
		:activeIndex='activeIndex'
		@changeActiveIndex='changeActiveIndex'
		></TabBar>
		  <ArticleList 
		  :labelList="labelList" 
		  class="list-container"
		  :activeIndex='activeIndex'
		  @changeActiveIndex='changeActiveIndex'
		  ></ArticleList>
    </view>
</template>

<script>
	import {get_labal_list}from'../../Ajax/Api/interface/home'
	console.log('get_labal_list',get_labal_list);
export default {
    onLoad() {
        this._initLabelList()
        console.log('this._initLabelList()')
    },
	data(){
		return {
			activeIndex:0,
			labelList: [] // 在这里正确地初始化 labelList
		}
		
	}
	,
    methods: {
      async  _initLabelList() {
			
			const labelList = await get_labal_list()
			//通过自己的方法把他展开
			this.labelList =[{name:'全部'} ,...labelList]
			console.log(this.labelList,'this.labelList =[{name:全部} ,...labelList]');
   //          console.log('_initLabelList',labelList)
   
    },changeActiveIndex(index){
		this.activeIndex=index
	}
},}
</script>

<style lang="scss">
.container {
    @include flex(flex-start, column);
    color: $base-color;
}
page {
  display: flex; /* 设置为 flexbox 布局，使子元素可以灵活排列 */
  height: 100%; /* 高度设置为 100%，占满父元素的高度 */
}

.home-container {
  flex: 1; /* 使该元素占据可用空间的1份，允许响应式调整大小 */
  overflow: hidden; /* 超出该元素范围的内容会被隐藏 */
  box-sizing: border-box; /* 包括内边距和边框在内的总宽度和总高度 */
  @include flex(flex-start, column); /* 引入一个 mixin，用于设置 flexbox 的排列方式，flex-start 表示靠上排列, column 表示以列的方式排列 */
  align-items: inherit; /* 继承父元素的内容对齐方式 */
}

.list-container {
  flex: 1; /* 同样占据可用空间的1份 */
  box-sizing: border-box; /* 同上，确保总宽度和总高度包括内边距和边框 */
}



</style>
